<template>
  <div class="addRecord">
    <van-nav-bar
      :title="title"
      left-arrow
      fixed
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight"
    >
      <template #right>
        <van-icon name="success" size="20" /><span
          style="color: #fff; font-size: 20px"
          >保存</span
        >
      </template>
    </van-nav-bar>
    <van-form scroll-to-error>
      <van-row type="flex">
        <van-col span="12">
          <van-field
            v-model="materialType"
            name="materialType"
            label="物料类型"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择物料类型' }]"
          >
            <template #input>
              <material-type v-model="materialType" />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="materialCode"
            name="materialCode"
            label="物料名称"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择物料' }]"
          >
            <template #input>
              <material-name
                :materialType="materialType"
                v-model="materialCode"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="batchID"
            name="batchID"
            label="批号"
            required
            clickable
            input-align="center"
            :rules="[{ required: true, message: '请输入批号' }]"
          >
            <template #input>
              <batch-list v-model="batchID" :materialCode="materialCode">
              </batch-list>
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="deptmentID"
            name="deptmentID"
            label="请验部门"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择请验部门' }]"
          >
            <template #input>
              <department-tree
                v-model="deptmentID"
                :materialCode="materialCode"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="applyDate"
            name="applyDate"
            label="请验日期"
            required
            input-align="center"
            readonly
          >
            <template #input>
              <picker-date v-model="applyDate" />
            </template>
          </van-field>
        </van-col>
        <!-- 
        <van-col span="12">
          <van-field
            v-model="urgencyDegreeCode"
            name="urgencyDegreeCode"
            label="紧急程度"
            required
            clickable
            input-align="center"
          >
            <template #input>
              <urgency-degree v-model="urgencyDegreeCode" />
            </template>
          </van-field>
        </van-col>

        <van-col span="12">
          <van-field
            v-model="isGiveName"
            name="isGiveName"
            label="是否送样"
            required
            readonly
            @click="showIsGive = true"
            placeholder="请选择"
            input-align="center"
          >
          </van-field>
        </van-col> -->
        <van-col span="12">
          <van-field
            v-model="extraRemarks"
            name="extraRemarks"
            label="备注"
            input-align="center"
            placeholder="备注"
          >
          </van-field>
        </van-col>
      </van-row>
    </van-form>

    <van-popup v-model="showIsGive" position="bottom" get-container="body">
      <van-picker
        show-toolbar
        :columns="isGiveArr"
        @confirm="saveIsGive"
        @cancel="cancelIsGive"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Form,
  Field,
  RadioGroup,
  Radio,
  Button,
  Popup,
  Toast,
  Col,
  Row,
  Tag,
  Checkbox,
  CheckboxGroup,
  Cell,
  CellGroup,
  Picker,
  List,
  SwipeCell,
  Notify,
  NavBar,
} from "vant";
import MaterialType from "@/components/MaterialType";
import MaterialName from "@/components/MaterialName";
import TextStandard from "@/components/TextStandard";
import DepartmentTree from "./DepartmentTree";
import PickerDate from "./PickerDate";
import UrgencyDegree from "@/components/UrgencyDegree";
import {
  getExtraRecords,
  getStandardItem,
  CreateOrUpdateAddTest,
} from "@/api/check";
import BatchList from "./BatchList.vue";
// import { to } from "@/utils";

export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Col.name]: Col,
    [Row.name]: Row,
    [Tag.name]: Tag,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Notify.name]: Notify,
    [NavBar.name]: NavBar,
    MaterialType,
    MaterialName,
    BatchList,
    TextStandard,
    DepartmentTree,
    PickerDate,
    UrgencyDegree,
  },
  props: {
    applySource: {
      type: String,
    },
  },
  data() {
    return {
      title: "新增报告更新信息",
      token: "",
      materialType: "",
      materialCode: "",
      batchID: "",
      extraRemarks: "",
      reportID: "",
      testStandard: "",
      showItem: false,
      sampleAttributes: [],
      columns: [],
      checkedAll: false,
      sampleAttributesName: "",
      deptmentID: "",
      applyDate: "",
      isGiveSample: "",
      showIsGive: false,
      isGiveArr: [
        { text: "否", id: "false" },
        { text: "是", id: "true" },
      ],
      isGiveSample: "false",
      isGiveName: "否",
      applyRemarks: "",
      addRecordArr: [],
      recordCount: "",
      urgencyDegreeCode: "",
    };
  },
  watch: {
    materialCode(val) {
      this.batchID = "";
    },
    testStandard(val) {
      this.getStandardItem();
    },
  },
  methods: {
    saveIsGive(value) {
      this.isGiveSample = value.id;
      this.isGiveName = value.text;
      this.showIsGive = false;
    },
    cancelIsGive() {
      this.showIsGive = false;
    },
    showItemPopup() {
      this.showItem = true;
    },
    onConfirm() {
      this.showItem = false;
    },
    cancel() {
      this.showItem = false;
      this.sampleAttributes = [];
      this.checkedAll = false;
    },
    getStandardItem() {
      var params = {
        queryModel: { Token: this.token, code: this.testStandard },
      };
      getStandardItem(params)
        .then((response) => {
          this.sampleAttributes = [];
          this.sampleAttributesName = "";
          this.columns = response.Result;
        })
        .catch(() => {});
    },
    clickLeft() {
      this.$router.replace({ name: "reportUpdate" });
    },
    clickRight() {
      var params = {
        Token: this.token,
        BillType: 2,
        BatchID: this.batchID,
        DeptmentID: this.deptmentID,
        // IsGiveSample: this.isGiveSample,
        MaterialCode: this.materialCode,
        MaterialType: this.materialType,
        // Urgency: this.urgencyDegreeCode,
        VerifyDate: this.applyDate,
        Remark: this.extraRemarks,
      };
      CreateOrUpdateAddTest(params)
        .then((response) => {
          if (response.ErrorCode == "0") {
            this.$router.push({
              name: "reportUpdate",
            });
          }
        })
        .catch(() => {});
    },
  },
  async created() {
    this.token = localStorage.getItem("tokenKey");
  },
};
</script>

<style lang="less" scoped>
// /deep/ .van-field__body {
//   border: 1px solid #ccc;
// }
.van-row {
  background: #fff;
}
.van-hairline-unset--top-bottom::after,
.van-hairline--top-bottom::after {
  border-width: 0;
}

.addRecord {
  padding-top: 40px;

  .custom-field {
    /deep/ .van-field__control--custom {
      > .van-cell {
        width: auto;
      }

      .wapper {
        flex: 1;
        width: auto;
      }
    }
  }
}
/deep/.van-tree-select__item {
  line-height: 1rem;
}
/deep/.van-popup {
  overflow-y: hidden;
}
.checkbox-con {
  height: calc(100% - 1.2rem);
}
</style>